<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: #f6afaf;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }
        .content {
            width: 300px;
            height: 300px;
            text-align: center;
            line-height: 300px;
      
        }

        .line {
           position: absolute;
        }

        .line:nth-child(1) {
            top:0px;
            left: 0px;
            width: 100%;
            height: 5px;
            background:linear-gradient(to right,transparent,#eeff6c);
            animation: shadow1 8s linear infinite;
        }
        @keyframes shadow1{
            0%{
                left: -100%;
            }
            50%,
            100%{
                left: 100%;
            }
        }
        .line:nth-child(2) {
            top: 0px;
            right: 0px;
            width: 5px;
            height: 100%;
            background:linear-gradient(to bottom,transparent,#6ffaff);
            animation: shadow2 8s linear infinite;
            animation-delay: 2s;
        }
        @keyframes shadow2{
            0%{
                top: -100%;
            }
            50%,
            100%{
                top: 100%;
            }
        }
        .line:nth-child(3) {
            bottom:0px;
            right: 0px;
            width: 100%;
            height: 5px;
            background:linear-gradient(to left,transparent,#1fde01);
            animation: shadow3 8s linear infinite;
            animation-delay: 4s;
        }
        @keyframes shadow3{
            0%{
                right: -100%;
            }
            50%,
            100%{
                right: 100%;
            }
        }
        .line:nth-child(4) {
            bottom:0px;
            left: 0px;
            width: 5px;
            height: 100%;
            background:linear-gradient(to top,transparent,#ff00ee);
            animation: shadow4 8s linear infinite;
            animation-delay: 6s;
        }
        @keyframes shadow4{
            0%{
                bottom: -100%;
            }
            50%,
            100%{
                bottom: 100%;
            }
        }
    </style>
</head>

<body>
    <div class="box">

        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <div class="content">霓虹灯</div>
    </div>
</body>
</html>